<script setup>
import MVerificationCode from "@/components/m-verification-code/m-verification-code.vue";
import {computed, reactive, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import {login, sendMail} from "@/api/user.js";
import {Toast} from 'vant';
import {setToken} from "@/utils/auth.js";

const route = useRoute()
const router = useRouter()
const state = useStore();

const loginUserInfo = reactive({
  email: '',
  code: '',
  btnState: true,
})

watch(
  () => loginUserInfo.email,
  (newVal,oldVal) => {
    loginUserInfo.btnState = newVal.trim().length <= 0;
  }
)

const onLogin = async () => {
  const res = await login(loginUserInfo);
  if(res.status === 100) {
    Toast.success(res.data.messages);
    setToken(res.data.token);
    setTimeout(() => {
      router.push('/');
    }, 1000)
  } else {
    Toast.fail(res.data);
  }
}

/**
 * 验证成功发送登录请求
 */
const onSuccess = () => {
  onLogin();
}

const verify = async () => {
  const res = await sendMail(loginUserInfo.email);
  if (res.status === 100) {
    Toast.success(res.data);
  }
}

const showInputCode = computed(() => {
  return state.getters.getVerificationCodeStatus;
})

</script>
<template>
  <div class="m-login-page">
    <van-row class="m-login-top">
      <van-col span="24">
        <span>密码登录</span>
      </van-col>
    </van-row>
    <div class="m-center">
      <van-row>
        <van-col span="24">
          <span class="m-text-head">免密码登录</span>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="24">
          <span class="m-text-email">邮箱地址</span>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="24" class="m-email-input-line">
          <input class="m-email-field" type="email" v-model="loginUserInfo.email"/>
        </van-col>
      </van-row>

      <van-row v-show="showInputCode">
        <van-col span="24">
          <span class="m-text-email">验证码</span>
        </van-col>
      </van-row>

      <van-row v-show="showInputCode">
        <van-col span="24" class="m-email-input-line">
          <input class="m-email-field" type="text" v-model="loginUserInfo.code"/>
        </van-col>
      </van-row>

    </div>
    <m-verification-code
        :is-disable="loginUserInfo.btnState"
        img-height="40"
        img-width="200"
        class="m-login-btn"
        @success="onSuccess"
        @verification-success-call="verify"
    />
  </div>
</template>


<style scoped lang="less">
*{
  touch-action:pan-x;
}
.m-login-page {
  background-color: #57505f;
  height: 100vh;
  color: #e7e2e2;
  & > .m-login-top {
    padding: 20px 20px;
    & > .van-col {
      & > span{
        float:right;
      }
    }
  }
  .m-center {
    padding: 50px 50px 30px;
    .van-row {
      //background-color: green;
      .m-text-head{
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .m-text-email {
        display: block;
        font-size: 0.8em;
        margin-top: 20px;
        //background-color: red;
      }
      .m-email-input-line {
        height: 50px;
        .m-email-field {
          border: none;
          background-color: rgba(255, 255, 255,0);
          color: rgba(255, 255, 255, 0.5);
          width: 100%;
          height: 100%;
          font-size: 1.5em;
          border-bottom: #5b5664 solid 2px;
        }
      }
    }
  }
  .m-login-btn {
    display: block;
    margin: 0 40px;
    //background-color: red;
  }
}
</style>
